<template >
  <view>
    <u-list @scrolltolower="scrolltolower" :pagingEnabled="false" @scrollWithAnimation="true">
      <u-list-item v-for="(item, index) in users" :key="index" :class="{'custom-list-item': !item.selected,
      'custom-choose-list-item': item.selected}">
        <view>
          <u-row>
            <u-col>
              <u-cell :title="`昵称：${item.userName}`"></u-cell>
            </u-col>
          </u-row>
          <u-row>
            <u-col>
              <u-cell :title="`用户名：${item.nickName}`"></u-cell>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="6">
              <u-button type="warning" @click="handleDelUser(item)">删除</u-button>
            </u-col>
            <u-col span="6">
              <u-button type="primary" @click="handleSwitchUser(item)">切换账号</u-button>
            </u-col>
          </u-row>
        </view>
      </u-list-item>
    </u-list>
    <view class="fixed-bottom">
      <u-button  @click="handleLongPress">增加用户</u-button>
    </view>
    <u-modal :show="show"  :title="title" showCancelButton confirmText="提交" @cancel="show = false"
             :showConfirmButton="true" @confirm="submitUserForm">
      <u--form :model="form" ref="uForm">
        <u-form-item label="账号">
          <u--input
              placeholder="请输入账号"
              border="surround"
              v-model="form.userName"
          ></u--input>
        </u-form-item>
        <u-form-item label="密码">
          <u--input
              placeholder="请输入密码"
              border="surround"
              v-model="form.password"
          ></u--input>
        </u-form-item>
      </u--form>
    </u-modal>
  </view>
</template>
<script>
import UniSection from "../../../components/uni-section/uni-section.vue";
import UIcon from "../../../uview-ui/components/u-icon/u-icon.vue";
import UniGrid from "../../../uni_modules/uni-grid/components/uni-grid/uni-grid.vue";
import UniGridItem from "../../../uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue";
import UList from "../../../uview-ui/components/u-list/u-list.vue";
import UCell from "../../../uview-ui/components/u-cell/u-cell.vue";
import UListItem from "../../../uview-ui/components/u-list-item/u-list-item.vue";
import UModal from "../../../uview-ui/components/u-modal/u-modal.vue";
import UForm from "../../../uview-ui/components/u--form/u--form.vue";
import UInput from "../../../uview-ui/components/u--input/u--input.vue";
import UFormItem from "../../../uview-ui/components/u-form-item/u-form-item.vue";
import UButton from "../../../uview-ui/components/u-button/u-button.vue";
import UCol from "../../../uview-ui/components/u-col/u-col.vue";
import URow from "../../../uview-ui/components/u-row/u-row.vue";
import {checkUser} from "@/api/login";

export default {
  components: {
    URow,
    UCol,
    UButton,
    UFormItem, UInput, UForm, UModal, UListItem, UCell, UList, UniGridItem, UniGrid, UIcon, UniSection},
  data() {
    return {
      users: [],
      title: '添加用户',
      show: false,
      form: {
        userName: null,
        nickName: null,
        password: null
      },
    }
  },
  created() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      this.users = uni.getStorageSync('users');
      if (!Array.isArray(this.users)) {
        this.users = [];
      }
      let userName = uni.getStorageSync('username');
      this.users.forEach(
          item => {
            if (item.userName === userName) {
              item.selected = true;
            } else {
              item.selected = false;
            }
          }
      )
    },
    scrolltolower() {
      this.$modal.msg("没有更多了！");
    },
    handleDelUser(item) {
      if (item.selected === true) {
        this.$modal.showToast('当前账户不允许删除~')
        return;
      }
      this.$modal.confirm('确定删除数据吗？').then(()=>{
        this.users.splice(this.users.indexOf(item), 1);
        uni.setStorageSync('users', this.users);
      })
    },
    handleSwitchUser(item) {
      if (item.selected === true) {
        this.$modal.showToast('当前账户不允许切换~')
        return;
      }
      this.$modal.confirm('确定切换账号吗？').then(()=>{
        this.switchUser(item);
      })

    },
    // 密码登录
    switchUser(item, aginFlag) {
      let loginForm = {
        username: item.userName,
        password: item.password,
        code: "",
        uuid: '',
        mesLogin: true,
        loginSure: false,
      }
      if (aginFlag === true) {
        loginForm.loginSure = true;
      }
      this.$store.dispatch('Login', loginForm).then(() => {
        this.loginSuccess(item)
      }).catch((msg) => {
        if (msg.toString().includes("该账号已在其他地点登录，是否继续登录")) {
          this.$modal.confirm(msg).then(() => {
            this.switchUser(item, true)
          })
        }
      })
    },
    // 登录成功后，处理函数
    loginSuccess(item) {
      uni.setStorageSync('username', item.userName);
      uni.setStorageSync("password", item.password);
      uni.setStorageSync('appUser', item.userName);
      // 设置用户信息
      this.$store.dispatch('GetInfo').then(res => {
        this.getUsers();
        this.$modal.msgSuccess("切换成功")
      })
      console.log(this.$store.state.user)
    },
    handleLongPress() {
      this.show = true;
      this.form = {
        userName: null,
        nickName: null,
        password: null
      }
    },
    submitUserForm() {
      checkUser(this.form).then(res => {
        let user = {
          userName: this.form.userName,
          nickName: res.data.nickName,
          password: this.form.password,
          selected: false
        }
        this.users.push(user);
        this.show = false;
        uni.setStorageSync('users', this.users);
      });
    }
  }
}
</script>
<style>
.custom-list-item {
  background-color: #ADD8E6;

  /* 如果需要让整个列表项点击区域都生效，可能还需要下面这行 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
}
.custom-choose-list-item {
  background-color: #CCCCCC;

  /* 如果需要让整个列表项点击区域都生效，可能还需要下面这行 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
}
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 可能需要设置一些内边距或外边距以保持良好的视觉效果 */
  padding: 10px;
  text-align: center;
  background-color: #fff; /* 背景色与页面背景色相同或透明，视设计而定 */
  z-index: 999; /* 确保按钮在最上层 */
}
</style>
